<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<title>抢单支付</title>
		<script src="js/jquery-2.1.4.min.js"></script>
		<script src="js/common.js"></script>
		<script src="js/mui.min.js"></script>
    	<link href="css/mui.min.css" rel="stylesheet"/>
    	<link href="css/style.css" rel="stylesheet"/>
	</head>
	<body>
		<div class="container">
			<header class="mui-bar mui-bar-nav layout-bg">
			    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left l-arrow"></a>
			    <h1 class="mui-title">抢单支付</h1>
			</header>
			
			<div class="mission-item layout-gap">
				<p class="pay-top">你需要支付</p>
				<p class="pay-money">5元</p>
				<p class="pay-cost">平台收取服务费，快速支付去抢单吧～</p>
			</div>
			
			<div class="choose-method">
				<div class="method-text">选择支付方式</div>
				
				<div class="pay-box">
					<div class="pay-flex fl pay-flex-check">
						<img src="images/wx-icon.png" class="method-icon" width="50" height="50">
						<p class="pay-text">微信支付</p>
					</div>

					<div class="pay-flex fr">
						<img src="images/zfb-icon.png" class="method-icon" width="50" height="50">
						<p class="pay-text">支付宝支付</p>
					</div>

					<div class="clearfix"></div>
				</div>
			</div>

			<button type="button" class="pay-btn layout-bg">立即支付并抢单</button>
		</div>

		<script>
			$(function() {
			    $('.pay-flex').on('click', function() {
                    $('.pay-flex').removeClass('pay-flex-check');
			        $(this).addClass('pay-flex-check');
				})
			})
		</script>
	</body>
</html>
